<template>
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="选择商品主档" :width="1200"  @ok="handleSubmit">

        <BasicForm @register="registerForm"></BasicForm>
        <!-- <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button> -->

        <!-- <BasicTable @register="registerTable" :rowSelection="rowSelection">
            <template #img="{ text }">
                <Image :src="text" :preview="true" height="150px" width="150px" />
            </template>
        </BasicTable> -->
    </BasicModal>
</template>

<script setup lang="ts">
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { BasicForm, useForm } from '/@/components/Form/index';
let isUpdate = ref(false);

import { FormSchema } from '/@/components/Table';
// 获取emit
const emit = defineEmits(['register', 'success', 'getSelectResult']);

const ProductFormSchema: FormSchema[] = [
    {
        label: '渠道',
        field: 'type',
        component: 'JDictSelectTag',
        componentProps: {
            dictCode: "xl_customer_type,type_desc,type_code"
        },
        required: true
    },
    {
        label: 'upc_code',
        field: 'upcCode',
        component: 'Input',
        required: true
    },
    {
        label: '供货价',
        field: 'supplyPrice',
        component: 'InputNumber',
        required: true
    },
]
//表单配置
const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        labelWidth: 150,
        schemas: ProductFormSchema,
        showActionButtonGroup: false,
});


//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await reset();
    let operateType = data.operateType;
    setModalProps({ confirmLoading: false, showCancelBtn: true, showOkBtn: true });
});

import { columns, searchFormSchema } from '../../product/XlProductInfo.data';
import { list } from '../../product/XlProductInfo.api';
const queryParam = reactive<any>({});
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
        title: '商品主档',
        api: list,
        columns:columns,
        canResize: false,
        ellipsis: false,
        showActionColumn: false,
        formConfig: {
            labelWidth: 120,
            schemas: searchFormSchema,
            autoSubmitOnEnter: true,
            showAdvancedButton: true,
            fieldMapToNumber: [
            ],
            fieldMapToTime: [
            ],
        },
        beforeFetch: (params) => {
            return Object.assign(params, queryParam);
        },
    }
})

const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext


import { saveOrUpdate } from '../XlProductInfo.api';
//表单提交事件
async function handleSubmit() {
    const data = await validate();
    console.log(data);
    await saveOrUpdate(data, false);
    //emit('getSelectResult', selectedRowKeys.value, selectedRowKeys.value, selectedRows);
    //关闭弹窗
    closeModal();
}
async function reset() {
    await resetFields();
}
async function submitForm() {
    // let data = getFieldsValue();
    // let params = Object.assign({}, formData, data);
    // console.log('表单数据', params)
    // await saveOrUpdateDict(params, true)
    closeModal()
    console.log(11)
}
</script>

<style scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
    width: 100%;
}

:deep(.ant-calendar-picker) {
    width: 100%;
}
</style>